<template>
  <div class="header">
    <el-row>
      <el-col class="elCol" :span="16">
        <div>
          <span @click="close">返回&nbsp;&nbsp;</span> {{ row.courseName
          }}{{ row.courseIndexName }}
        </div>
      </el-col>
      <!-- <el-col class="elColRigth" :span="4">
                <div>{{row.submitTime}}</div>
            </el-col> -->
    </el-row>
  </div>
  <div class="totalContent">
    <div class="lefContent">
      <div class="leftTitle">
        <p class="pfot">
          提交人：<span>{{ row.creatorName }}</span>
        </p>
        <p class="pfot1">提交时间:{{ row.submitTime }}</p>
      </div>
      <div class="left_plan">教案</div>
      <div class="left-auto">
        <div
          v-if="rapList && rapList.length !== 0"
          :title="i.fileName"
          :class="{ leftFont: true, dvbg: isAdd === o + i.fileName }"
          @click="dvClick(o, i)"
          v-for="(i, o) in rapList"
          :key="o"
        >
          {{ i.fileName }}
        </div>
        <div class="textColor" :class="{ leftFont: true }" v-else>
          未提交资料
        </div>
      </div>

      <div class="left_plan"><span>*</span>说课视频</div>
      <div class="left-auto">
        <div
          v-if="teacerList && teacerList.length !== 0"
          :title="i.fileName"
          :class="{ leftFont: true, dvbg: isAdd === k + i.fileName }"
          @click="dvClick(k, i)"
          v-for="(i, k) in teacerList"
          :key="k"
        >
          {{ i.fileName }}
        </div>
        <div class="textColor" :class="{ leftFont: true }" v-else>
          未提交资料
        </div>
      </div>
    </div>
    <div class="bodyContent">
      <div class="contentBrings">
        <el-empty v-if="!currentFile.filePath" description="无资料"></el-empty>
        <PageView v-else :courseIndexDto="examine" :currentFile="currentFile" />
      </div>
    </div>
    <div class="rightContent">
      <div class="imgs">
        <img src="../../../assets/check-new/xx.png" alt="" />
      </div>
      <div class="btnpass">
        审核结论:
        <el-button
          circle
          :class="{ btnType: isCss }"
          :disabled="noComDis"
          @click="passHandle"
          >通过</el-button
        >
        <el-button
          circle
          :class="{ btnType: isShow }"
          :disabled="isLookFour"
          @click="noPass"
          >不通过</el-button
        >
      </div>
      <!-- 不通过 -->
      <div>
        <!-- <el-collapse-transition> -->
        <div class="transition-box">
          <div v-show="isShow">
            <el-card>
              <div style="overflow: auto">
                点评：
                <CurEditor
                  :isDis="!isTextEdit"
                  @curEditor="curEditor"
                  min-height="200px"
                  max-width="200px"
                  v-model="form.refuseReason"
                  placeholder="请输入点评内容"
                />
              </div>
              <div class="checkboxW">
                <div
                  :class="{ 'check-box': true, 'check-box-is': isOne }"
                  @click="plainHandle('one')"
                >
                  教案不合格
                </div>
                <div
                  :class="{ 'check-box': true, 'check-box-is': isTwo }"
                  @click="plainHandle('two')"
                >
                  还课不合格
                </div>
              </div>
            </el-card>
          </div>
        </div>
        <!-- </el-collapse-transition> -->
      </div>
      <!-- pass部分 -->
      <div>
        <!-- <el-collapse-transition> -->
        <div v-show="isCss" class="btnContent">
          <el-card
            ><p class="score">
              评分：<span v-show="grade">{{ grade }}分</span>
            </p>
            <div class="quality">
              <p class="pwhite">
                备课质量:
                <span>
                  <el-rate
                    :disabled="comDis"
                    v-model="scorevalue"
                    @change="changeQuilky(scorevalue, 'zl')"
                  />
                  <span v-if="scorevalueNum" class="rateSpan">
                    {{ scorevalueNum }}分
                  </span>
                </span>
              </p>
              <p v-show="starIs" class="qualityStar">
                教学目标:<el-rate
                  :disabled="comDis"
                  @change="compuChange"
                  v-model="form.prepareLessonScore.teachTarget"
                />
              </p>
              <p v-show="starIs" class="qualityStar">
                教学过程:<el-rate
                  :disabled="comDis"
                  @change="compuChange"
                  v-model="form.prepareLessonScore.teachProcess"
                />
              </p>
              <p v-show="starIs" class="qualityStar">
                教学准备:<el-rate
                  :disabled="comDis"
                  @change="compuChange"
                  v-model="form.prepareLessonScore.teachPlan"
                />
              </p>
              <p v-show="starIs" class="qualityStar">
                板书准备:<el-rate
                  :disabled="comDis"
                  @change="compuChange"
                  v-model="form.prepareLessonScore.templatePlan"
                />
              </p>
              <p v-show="starIs" class="qualityStar">
                教学反思:<el-rate
                  :disabled="comDis"
                  @change="compuChange"
                  v-model="form.prepareLessonScore.teacherRethink"
                />
              </p>
            </div>
            <div class="quality">
              <p class="pwhite">
                还课评分:
                <span>
                  <el-rate
                    :disabled="comDis"
                    v-model="scorevaluetwo"
                    @change="changeQuilky(scorevaluetwo, 'pf')"
                  />
                  <span v-if="scorevaluetwoNum" class="rateSpan">
                    {{ scorevaluetwoNum }}分
                  </span>
                </span>
              </p>
              <p v-show="starIsTwo" class="qualityStar">
                情景导入:<el-rate
                  :disabled="comDis"
                  @change="compuChangeTwo"
                  v-model="form.prepareLessonScore.situationImport"
                />
              </p>
              <p v-show="starIsTwo" class="qualityStar">
                教学目标:<el-rate
                  :disabled="comDis"
                  @change="compuChangeTwo"
                  v-model="form.prepareLessonScore.videoTeachTarget"
                />
              </p>
              <p v-show="starIsTwo" class="qualityStar">
                教学过程:<el-rate
                  :disabled="comDis"
                  @change="compuChangeTwo"
                  v-model="form.prepareLessonScore.teachProcessMethod"
                />
              </p>
              <p v-show="starIsTwo" class="qualityStar">
                教学效果:<el-rate
                  :disabled="comDis"
                  @change="compuChangeTwo"
                  v-model="form.prepareLessonScore.teachResult"
                />
              </p>
              <p v-show="starIsTwo" class="qualityStar">
                教师基本功:<el-rate
                  :disabled="comDis"
                  @change="compuChangeTwo"
                  v-model="form.prepareLessonScore.teachBasicTraining"
                />
              </p>
            </div>
          </el-card>
        </div>
        <!-- </el-collapse-transition> -->
      </div>
      <div style="margin: 30px 15px 0px 15px">
        <el-button
          style="width: 248px; margin-left: 15px"
          :disabled="isNext || (!isCss && !isShow) && isRefuseReason"
          round
          type="primary"
          @click="submit"
          >提交</el-button
        >
      </div>
    </div>
  </div>
</template>
<script lang="ts">
import {
  defineComponent,
  reactive,
  toRefs,
  computed,
  inject,
  onMounted,
} from "vue";
import axios from "axios";
import { AxResponse } from "@/core/axios";
import PageView from "./pageView.vue";
import CurEditor from "./curEditor.vue";
import { ElMessage } from "element-plus";
import $ from '$';

export default defineComponent({
  components: { PageView, CurEditor },
  props: {
    checkObj: {
      type: Object,
      default: () => ({}),
    },
    row: {
      type: Object,
      default: () => ({}),
    },
    data: {
      type: Object,
      default: () => ({}),
    },
  },
  setup(props, { emit }) {
    let close: any = inject("close");

    const row = props.row;

    let form = reactive({
      prepareLessonId: "", //备课id
      operatType: props.data.operatType ? props.data.operatType : 2, // 操作类型  2-年级审核  3-校区审核
      checkStatus: 4, // 审核状态：4-通过  5-不通过
      refuseReason: row.score.refuseReason, // 不通过原因，checkStatus==5 时，该值不能为空
      refuseContents: row.score.refuseContents ? row.score.refuseContents : [], // 不通过内容（数组），1-教案  2-还课视频
      prepareLessonScore: {
        teachTarget: row.tip === "ck" ? row.score.teachTarget : 0, //教学目标
        teachProcess: row.tip === "ck" ? row.score.teachProcess : 0, //教学过程
        teachPlan: row.tip === "ck" ? row.score.teachPlan : 0, //教学准备
        templatePlan: row.tip === "ck" ? row.score.templatePlan : 0, //板书设计
        teacherRethink: row.tip === "ck" ? row.score.teacherRethink : 0, //教师反思

        situationImport: row.tip === "ck" ? row.score.situationImport : 0, //情境导入
        videoTeachTarget: row.tip === "ck" ? row.score.videoTeachTarget : 0, //还课评分-教学目标
        teachProcessMethod: row.tip === "ck" ? row.score.teachProcessMethod : 0, //教学过程与方法
        teachResult: row.tip === "ck" ? row.score.teachResult : 0, //教学效果
        teachBasicTraining: row.tip === "ck" ? row.score.teachBasicTraining : 0, // 教学基本功
      },
    });
    const curEditor = (e: any) => {
      form.refuseReason = e;
    };

    let teacerList: any = reactive([]);
    let rapList: any = reactive([]);
    props.checkObj.forEach((item) => {
      if (item.type == 3) {
        teacerList.push(item);
      } else {
        rapList.push(item);
      }
    });
    const scoreRate = props.row.checkStaus === 4 || props.row.checkStaus === 2;
    const rowTip = props.row.tip;
    const rowScore = props.row.score;

    const compuScoreValue = Math.ceil(
      (Number(rowScore.teachTarget) +
        Number(rowScore.teachProcess) +
        Number(rowScore.teachPlan) +
        Number(rowScore.templatePlan) +
        Number(rowScore.teacherRethink)) /
        5
    );
    const compuScoreValueTwo = Math.ceil(
      (Number(rowScore.situationImport) +
        Number(rowScore.videoTeachTarget) +
        Number(rowScore.teachProcessMethod) +
        Number(rowScore.teachResult) +
        Number(rowScore.teachBasicTraining)) /
        5
    );
    const baseApi = import.meta.env.VITE_APP_BASE_URL;
    const web365 = $.utils.generatBasePath();
    const data = reactive({
      examine: props.checkObj,
      row: props.row,

      isShow: props.row.checkStaus === 5 || rowTip === "dp" ? true : false,
      isCss: scoreRate || rowTip === "pf" ? true : false,
      starIs: rowTip === "ck" && props.row.checkStaus === 2 ? true : false, // 判断xx下边的线性运动
      starIsTwo: rowTip === "ck" && props.row.checkStaus === 2 ? true : false, // 判断xx2下边的线性运动
      baseApi,
      web365,
      teacerList,
      rapList,
      isAdd:
        rapList && rapList[0]
          ? "0" + rapList[0].fileName
          : teacerList && teacerList[0]
          ? "0" + teacerList[0].fileName
          : {},
      currentFile:
        rapList && rapList[0]
          ? rapList[0]
          : teacerList && teacerList[0]
          ? teacerList[0]
          : {},

      scorevalue: props.row.checkStaus === 2 ? compuScoreValue : 0, // xx绑定的值
      scorevalueNum: 0,
      scorevaluetwo: props.row.checkStaus === 2 ? compuScoreValueTwo : 0, // xx2绑定的值
      scorevaluetwoNum: 0,

      isOne: form.refuseContents.includes("1") ? true : false,
      isTwo: form.refuseContents.includes("2") ? true : false,
    });
    const isLookFour = computed(() => [2, 4].includes(data.row.checkStaus));
    const comDis = computed(
      () => [2].includes(data.row.checkStaus) || rowTip === "ck"
    );
    const noComDis = computed(
      // () => [5].includes(data.row.checkStaus) && rowTip === "ck"
      () => [5].includes(data.row.checkStaus) && (rowTip === "ck" || rowTip === "dp")
    );
    let isNext = computed(
      // () => data.row.checkStaus === 5 || data.row.checkStaus === 2
      () => data.row.checkStaus === 2 || rowTip === "ck"
    );
    /**------------状态等于5 并且 未点评----------- */
    let isRefuseReason = computed(
      () => rowTip !== "dp"
    );
    /**-------- 可编辑的--------- */
    let isTextEdit = computed(
      () => rowTip === "dp" || [0, 1, 3].includes(data.row.checkStaus)
    );

    let grade = computed(() => {
      if (data.scorevalue && data.scorevaluetwo) {
        // return Math.ceil((Number(data.scorevalue) * 10 + Number(data.scorevaluetwo) * 10) / 20) * 10 + 50
        return (
          ((Number(data.scorevalue) * 10 + Number(data.scorevaluetwo) * 10) /
            20) *
            10 +
          50
        ).toFixed(0);
      }
    });
    let compuChange = () => {
      let res = form.prepareLessonScore;
      data.scorevalueNum =
        (Number(res.teachTarget) * 10 +
          50 +
          (Number(res.teachProcess) * 10 + 50) +
          (Number(res.teachPlan) * 10 + 50) +
          (Number(res.templatePlan) * 10 + 50) +
          (Number(res.teacherRethink) * 10 + 50)) /
        5;
      data.scorevalue =
        (Number(res.teachTarget) * 10 +
          Number(res.teachProcess) * 10 +
          Number(res.teachPlan) * 10 +
          Number(res.templatePlan) * 10 +
          Number(res.teacherRethink) * 10) /
        50;
    };
    let compuChangeTwo = () => {
      let res = form.prepareLessonScore;
      data.scorevaluetwo =
        (Number(res.situationImport) * 10 +
          Number(res.videoTeachTarget) * 10 +
          Number(res.teachProcessMethod) * 10 +
          Number(res.teachResult) * 10 +
          Number(res.teachBasicTraining) * 10) /
        50;
      data.scorevaluetwoNum =
        (Number(res.situationImport) * 10 +
          50 +
          (Number(res.videoTeachTarget) * 10 + 50) +
          (Number(res.teachProcessMethod) * 10 + 50) +
          (Number(res.teachResult) * 10 + 50) +
          (Number(res.teachBasicTraining) * 10 + 50)) /
        5;
    };

    const passHandle = () => {
      data.isShow = false;
      data.isCss = true;
    };
    const noPass = () => {
      data.isCss = false;
      data.isShow = true;
      data.scorevaluetwoNum = 0;
      data.scorevalueNum = 0;

      data.scorevalue = 0;
      data.scorevaluetwo = 0;
      form.prepareLessonScore.teachTarget = 0;
      form.prepareLessonScore.teachProcess = 0;
      form.prepareLessonScore.teachPlan = 0;
      form.prepareLessonScore.templatePlan = 0;
      form.prepareLessonScore.teacherRethink = 0;
      form.prepareLessonScore.situationImport = 0;
      form.prepareLessonScore.videoTeachTarget = 0;
      form.prepareLessonScore.teachProcessMethod = 0;
      form.prepareLessonScore.teachResult = 0;
      form.prepareLessonScore.teachBasicTraining = 0;
    };
    const changeQuilky = (val: number, tip: string) => {
      if (val && tip === "zl") {

        data.scorevalueNum = Number(val) * 10 + 50;
        data.starIs = true;
        form.prepareLessonScore.teachTarget = val;
        form.prepareLessonScore.teachProcess = val;
        form.prepareLessonScore.teachPlan = val;
        form.prepareLessonScore.templatePlan = val;
        form.prepareLessonScore.teacherRethink = val;
      }
      if (val && tip === "pf") {
        data.scorevaluetwoNum = Number(val) * 10 + 50;
        data.starIsTwo = true;
        form.prepareLessonScore.situationImport = val;
        form.prepareLessonScore.videoTeachTarget = val;
        form.prepareLessonScore.teachProcessMethod = val;
        form.prepareLessonScore.teachResult = val;
        form.prepareLessonScore.teachBasicTraining = val;
      }
    };
    const submit = async () => {
      let _form = form;
      let _list: any = [];

      if (data.isCss) form.checkStatus = 4;
      if (data.isShow) form.checkStatus = 5;

      if (
        data.isTwo ||
        (_form.refuseContents && _form.refuseContents.includes("2"))
      )
        _list.push("2");
      if (
        data.isOne ||
        (_form.refuseContents && _form.refuseContents.includes("1"))
      )
        _list.push("1");
      form.refuseContents = _list;
      // if(_form.checkStatus === 5 && !_form.refuseReason) return ElMessage.warning('点评不能为空')
      if (_form.checkStatus === 5 && _form.refuseContents?.length === 0)
        return ElMessage.warning("点评按钮必须选择");

      if (data.scorevaluetwo && !data.scorevalue)
        return ElMessage.warning("请完成备课质量评分");
      if (!data.scorevaluetwo && data.scorevalue)
        return ElMessage.warning("请完成还课评分");

      form.prepareLessonId = data.row?.id;

      let res = await axios.post<any, AxResponse>(
        "/admin/prepareLesson/checkPrepareLesson",
        form,
        { headers: { "Content-Type": "application/json" } }
      );
      if (!res.json) return;
      close();
      ElMessage.success("提交成功");
    };
    const plainHandle = (tip: string) => {
      if ([5].includes(data.row.checkStaus)) return;
      form.refuseContents = [];
      if (tip === "one") data.isOne = !data.isOne;
      if (tip === "two") data.isTwo = !data.isTwo;
    };
    const nextHandle = () => {};
    const dvClick = (val: any, current: any) => {
      data.isAdd = val + current.fileName;
      data.currentFile = current;
    };

    return {
      ...toRefs(data),
      form,
      curEditor,
      comDis,
      isLookFour,
      noComDis,
      focus,
      noPass,
      passHandle,
      submit,
      dvClick,
      changeQuilky,
      compuChange,
      compuChangeTwo,
      close,
      nextHandle,
      isNext,
      grade,
      plainHandle,
      isRefuseReason,
      isTextEdit
    };
  },
});
</script>
<style scoped lang="scss">
@import "../index.scss";
</style>
